<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片添加</title>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
<form enctype="multipart/form-data" method="post" id="upload" role="form">
    <div class="layui-form-item">
        <label class="layui-form-label required">公众号链接</label>
        <div class="layui-input-block">
            <input type="text" name="pictureOfficialAccountUrl" id="pictureOfficialAccountUrl" lay-verify="required" lay-reqtext="图片跳转链接不能为空" placeholder="请输入图片链接"
                   value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">图片名称</label>
        <div class="layui-input-block">
            <input type="text" name="filename" id="filename" lay-verify="required" lay-reqtext="图片名称不能为空" placeholder="请输入图片名称"
                   value="" class="layui-input">

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">公众号标题</label>
        <div class="layui-input-block">
            <input type="text" name="pictureDetails" id="pictureDetails" lay-verify="required" lay-reqtext="图片名称不能为空" placeholder="请输入图片名称"
                   value="" class="layui-input">
           
        </div>
    </div>
    <!-- <div class="layui-form-item">
        <label class="layui-form-label required">公众号链接</label>
        <div class="layui-input-block">
            <input type="text" name="pictureTestUrl" id="pictureName" lay-verify="required" lay-reqtext="图片名称不能为空" placeholder="请输入公众号链接"
                   value="" class="layui-input">
           
        </div>
    </div> -->
    <!--TODO 上传之后图标需要显示出来-->
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">图标</label>
        <div class="layui-input-block">
            <a href="javascript:;" class="file">  
             <i class="layui-icon">&#xe67c;</i>    点击上传
            <input type="file" name="file">
          </a>

        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认提交</button>
        </div>
    </div>
</form>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

<script>
    var hostport = document.location.host
    var hostf = document.location.protocol
    var url = hostf + "//" + hostport
    layui.use(['form'], function () {
        var icon = '';
        var form = layui.form,
        layer = layui.layer,
         $ = layui.$;
        upload = layui.upload;
  form.on('submit(saveBtn)', function () {
     var data = new FormData($("#upload")[0]);
     var data2 = new FormData($("#upload")[1]);
     var data3 = new FormData($("#upload")[2])

       $.ajax({
         "url": url +"/submit",
          "data": data,data2,data3,
          "type": "POST",
           "processData": false,
           "contentType": false,
            "dataType": "json",
             success: function (result) {
                 console.log(result)
                    if (result.code ==0) {
                        layer.msg(result.message);
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        //parent.$("#shousuobtn",parent.document).trigger('click');	//子页面局部刷新父页面事件
                        window.parent.document.getElementById("shousuobtn").click();
                    }else if (result.result == "error"){
                        layer.msg("提交失败~请重新在提交！！");
                    }
                },
                error: function () {
                    console.log("网络出错！请重新连接")
                }
            });

            return false;
        });

    });
</script>
</body>
</html>
<style>
    .file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    background-color: #009688;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    padding: 8px 15px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background-color: #009688;
    color: #fff;
    text-decoration: none;
}
</style>